<template>
    <Popup ref="popupRef" :title="modeTitle" :formState="formState" :rules="rules" :editApi="updateOrganization" :addApi="saveOrganization">
        <template #default="{ formState }">
            <a-form-item label="组织名称" name="title">
                <a-input v-model:value="formState.title" placeholder="请输入组织名称" />
            </a-form-item>
            <a-form-item label="负责人" name="leader_id">
                <m-form-admin v-model:value="formState.leader_id" placeholder="请选择负责人" />
            </a-form-item>
        </template>
    </Popup>
</template>

<script setup lang="ts">
import Popup from '@/components/popup/index.vue'
import { saveOrganization, updateOrganization } from '@/api/system/organize/organization'
const popupRef = ref<InstanceType<typeof Popup>>()
const modes = ref<'add' | 'edit'>('add')

interface FormState {
    title: string
    leader_id: string | null
}
const formState = reactive<FormState>({
    title: '',
    leader_id: null
})

const rules = {
    title: [{ required: true, message: '请输入组织名称' }],
    leader_id: [{ required: true, message: '请选择负责人' }]
}

const modeTitle = computed(() => {
    return modes.value === 'add' ? '添加组织' : '编辑组织'
})

const open = (mode: 'add' | 'edit', record?: any) => {
    modes.value = mode
    popupRef.value?.open(mode, record)
}


defineExpose({
    open
})
</script>
